<!--
 * @Author: wz
 * @Date: 2020-11-25 22:36:52
 * @LastEditors: wz
 * @LastEditTime: 2020-12-07 11:52:04
 * @Description:忘记密码
-->

<template>
    <div class="reset-password">
        <div class="login-title mt40">重置密码</div>
        <LoginInput
            class="mt20"
            iconfont-name="iconshoujihaoma"
            placeholder="请输入手机号码"
            title="手机号码"
            v-model="editForm.mobile"
            :maxLength="11"
        ></LoginInput>
        <LoginInput class="mt10" iconfont-name="iconyanzhengma" placeholder="请输入验证码" title="验证码" v-model="editForm.smsCode">
            <template slot="append">
                <div @click="sendValidCode" class="sms-code flex-grid">{{ btnText }}</div>
            </template>
        </LoginInput>
        <LoginInput
            class="mt10"
            type="password"
            iconfont-name="iconmima"
            placeholder="请输入密码"
            title="密码"
            v-model="editForm.loginPassword"
        ></LoginInput>
        <LoginInput
            class="mt10"
            type="password"
            iconfont-name="iconmima"
            placeholder="请再次确认密码"
            title="确认密码"
            v-model="editForm.confirmPassword"
        ></LoginInput>
        <qb-button @click="submitPassword" class="login-btn">{{ submitting ? '修改中...' : '确认修改' }}</qb-button>
        <div @click="goLoginPage" class="go-login_btn">返回登录</div>
    </div>
</template>

<script>
    import LoginInput from '../loginInput'
    export default {
        name: 'resetPassword',
        components: { LoginInput },
        props: {},
        data() {
            return {
                disabledSendCode: false,
                submitting: false,
                btnText: '获取验证码',
                count: 59,
                timer: null,
                editForm: {
                    mobile: '',
                    smsCode: '',
                    loginPassword: '',
                    confirmPassword: ''
                }
            }
        },
        methods: {
            goLoginPage() {
                this.$emit('redirect', 'login')
            },

            countReduce() {
                this.btnText = `${this.count} 秒`
                this.timer = setInterval(() => {
                    if (this.count > 0) {
                        this.count--
                        this.btnText = `${this.count} 秒`
                    } else {
                        this.disabledSendCode = false
                        this.btnText = '重新获取'
                        this.count = 59
                        clearInterval(this.timer)
                    }
                }, 1000)
            },
            async sendValidCode() {
                if (this.disabledSendCode) return
                if (!this.editForm.mobile || (this.editForm.mobile && !/^1[3456789]\d{9}$/.test(this.editForm.mobile))) {
                    this.$message.error('请先输入正确的手机号码')
                    return
                }
                this.disabledSendCode = true
                this.countReduce()
                let [res, err] = await this.$api.uac.apiValidResetPswMSG({ mobile: this.editForm.mobile })
                if (res) this.$message.success('发送验证码成功')
                if (err) {
                    this.disabledSendCode = false
                    this.btnText = '重新获取'
                    this.count = 59
                    clearInterval(this.timer)
                }
            },

            async submitPassword() {
                if (!this.editForm.loginPassword) {
                    this.$message.error('请输入新密码')
                    return
                }
                if (!this.editForm.confirmPassword) {
                    this.$message.error('请输入确认密码')
                    return
                }
                if (this.editForm.confirmPassword !== this.editForm.loginPassword) {
                    this.$message.error('密码不一致')
                    return
                }
                this.submitting = true
                let params = JSON.parse(JSON.stringify(this.editForm))
                let [res, err] = await this.$api.uac.apiResetPassword(params)
                if (res) {
                    this.submitting = false
                    this.$message.success('重置密码成功')
                    this.goLoginPage()
                }
                if (err) this.submitting = false
            }
        },
        beforeDestroy() {
            clearInterval(this.timer)
            this.timer = null
        }
    }
</script>
<style lang="less" scoped>
    @import './index.less';
</style>
